<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>基于SSM的英语单词背诵系统</title>
    <meta name="description" content="Ela Admin - HTML5 Admin Template">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons@0.1.2/css/themify-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.2.0/css/flag-icon.min.css">
    <link rel="stylesheet" th:href="@{/static/css/cs-skin-elastic.css}">
    <link rel="stylesheet" th:href="@{/static/css/style.css}">

    <link rel="stylesheet" th:href="@{/static/lib/editormd/css/editormd.preview.css}" />

    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' rel='stylesheet' type='text/css'>
<!--    首行缩进-->
    <style>
        .description{text-indent: 40px;}

    </style>
    <style>
        .md-content {
            width: 100%;
            margin: 0 auto;
        }
    </style>


</head>

<body>






<div th:replace="common/leftbar::leftbar"></div>



<div id="right-panel" class="right-panel">

    <!-- Header-->
    <!-- Header-->
    <div th:replace="common/header::header"/>

    <div class="breadcrumbs">
        <div class="breadcrumbs-inner">
            <div class="row m-0">
                <div class="col-sm-4">
                    <div class="page-header float-left">
                        <div class="page-title">
                            <h1>当前位置</h1>
                        </div>
                    </div>
                </div>
                <div class="col-sm-8">
                    <div class="page-header float-right">
                        <div class="page-title">
                            <ol class="breadcrumb text-right">
                                <li><a href="#">主页</a></li>
                                <li><a href="#">学习中心</a></li>
                                <li class="active">书籍</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<!--    内容-->
    <div class="content">
        <div class="animated fadeIn">

            <div class="ui-typography">
                <div class="row">
                    <div class="col-md-12">


                        <div class="card">
                            <div class="card-header">
                                <strong class="card-title" v-if="headerText">阅读</strong>
                            </div>

                            <div class="card-body">
                                <div class="typo-headers">

                                    <h2 align="center" th:text="${book.getBookName()}" class="pb-2 display-5 h" >书名</h2>

                                </div>
                                <div class="typo-articles">
                                    <blockquote class="blockquote mt-1 text-right">
                                        <footer class="blockquote-footer" th:text="${book.getBookUser()}">作者名字</footer>

                                    </blockquote>
                                    <blockquote>
                                       <p   class="description" th:text="${book.getDescription()}">
                                        </p>
                                    </blockquote>
                                </div>
                                <br>
                                <hr>
                                        <div class="col-md-12">
                                            <div id="md-content" class="jumbotron">
                                                <textarea th:text="${book.getContent()}" style="display:none;"></textarea>
                                            </div>
                                        </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>



        </div><!-- .animated -->
    </div><!-- .content -->


    <div class="clearfix"></div>

    <div th:replace="common/footer::footer"/>


</div><!-- /#right-panel -->



<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.4/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-match-height@0.7.2/dist/jquery.matchHeight.min.js"></script>
<!--<script th:src="@{/js/main.js}"></script>-->
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script th:src="@{/static/lib/editormd/editormd.min.js}"></script>
<script th:src="@{/static/lib/editormd/lib/marked.min.js}"></script>
<script th:src="@{/static/lib/editormd/lib/prettify.min.js}"></script>

<script th:src="@{/static/lib/editormd/lib/raphael.min.js}"></script>
<script th:src="@{/static/lib/editormd/lib/underscore.min.js}"></script>
<script th:src="@{/static/lib/editormd/lib/sequence-diagram.min.js}"></script>
<script th:src="@{/static/lib/editormd/lib/flowchart.min.js}"></script>
<script th:src="@{/static/lib/editormd/lib/jquery.flowchart.min.js}"></script>



<script type="text/javascript" >
    $(function() {
        var testEditormdView2;
        testEditormdView2 = editormd.markdownToHTML("md-content", {
            htmlDecode      : "style,script,iframe",  // you can filter tags decode
            emoji           : true,
            taskList        : true,
            tex             : true,  // 默认不解析
            flowChart       : true,  // 默认不解析
            sequenceDiagram : true,  // 默认不解析
        });
    });
</script>

</body>
</html>